<template>
  <div>
    <ArtWangEditor v-model="form.content"></ArtWangEditor>
    <div class="footer">
      <el-button type="primary" @click="submitForm" :disabled="disabled">确定</el-button>
      <el-button @click="reset">重置</el-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive } from 'vue'
  import { ContentService } from '@/api/common'
  import { ElMessage } from 'element-plus'
  const form = reactive({
    content: '',
    cate_id: 7,
    title: '隐私协议'
  })
  const queryFrom = reactive({
    page: 1,
    size: 10,
    cate_id: 7
  })
  const total = ref(0)
  const disabled = ref(false)
  onMounted(() => {
    getData()
  })
  // 获取内容
  const getData = async () => {
    const res = await ContentService.getListContent(queryFrom)
    form.content = res.data.data[0]?.content
    form.id = res.data.data[0].id || undefined
    total.value = res.data.total
  }
  // 提交
  const submitForm = async () => {
    if (form.id) {
      await ContentService.updateContent(form)
    } else {
      await ContentService.addContent(form)
    }
    let text = form.id != '' || form.id != undefined ? '修改成功' : '新增成功'
    ElMessage.success(text)
    getData()
  }
  // 重置
  const reset = () => {
    form.content = null
  }
</script>

<style scoped lang="scss">
  .footer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
  }
</style>
